<template>
    <div class="fxn-tag">
        <div class="tag-container">
            <div class="direction left" @click="handleScroll(-400)">
                <el-icon color="#C0C4CC" :size="16"><arrow-left-bold /></el-icon>
            </div>
            <div class="tags">
                <el-scrollbar ref="scrollbar" native @scroll="scroll">
                    <div class="tags-box">
                        <div v-for="(item,index) in tagList" :key="item.path" class="tags-item" :class="{'active': isActive(item.path)}">
                            <div class="dot"></div>
                            <router-link :to="item.path" tag="div" class="tag-item-title">{{item.name}}</router-link>
                            <el-icon class="close-icon" @click="closeTags(index)" color="#BDC2CC" :size="14"><close /></el-icon>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
            <div class="direction right" @click="handleScroll(400)">
                <el-icon color="#C0C4CC" :size="16"><arrow-right-bold /></el-icon>
            </div>
            <div class="colse" title="关闭其他标签" @click="closeOtherTags">
                <el-icon color="#C0C4CC" :size="16"><close-bold /></el-icon>
            </div>
        </div>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, watch, computed, ref } from 'vue';
    import { useRoute, useRouter } from "vue-router";
    import { useStore } from "vuex";

    export default defineComponent({
        name: '',
        props:{
           
        },
        setup() {
            const { proxy } = getCurrentInstance();
            const store = useStore();
            const route = useRoute();
            const router = useRouter();

            //初始化数据
            const state = reactive({
                tagList: computed(() => store.state.tagList),
                scroll: 0,
                tagswidth: 200,
            })

            const setTags = (route) => {
                state.tagswidth += state.tagList.length*200;
                if(proxy.$refs.scrollbar){
                    proxy.$refs.scrollbar.setScrollLeft(state.tagswidth);
                }
                //是否已存在
                const isExist = state.tagList.some((item) => {
                    return item.path == route.fullPath
                });setTags
                if (!isExist) {
                    store.commit('addTagsItem',{
                        name: route.name,
                        path: route.fullPath
                    })
                }
            };

            //首次进入系统执行
            setTags(route);

            //路由监听
            watch(route, () => {
                setTags(route);
            })

            //是否选中
            const isActive = (path) => {
                return path === route.fullPath;
            };

            //关闭标签
            const closeTags = (index) => {
                const delItem = state.tagList[index]; //被删除的标签
                store.commit('delTagsItem', index);
                //标签数组更新后获取index下标的标签，若没有获取下一个
                const item = state.tagList[index] ? state.tagList[index] : state.tagList[index - 1];
                
                if (item) {
                    delItem.path === route.fullPath && router.push(item.path) //删除当前标签的情况
                } else { //当标签都被删除后默认跳转
                    router.push('/')
                }

            };

            //关闭其他标签
            const closeOtherTags = () => {
                const curItem = state.tagList.filter((item) => {
                    return item.path === route.fullPath
                });
                store.commit('delOtherTags', curItem);
            };

            //左右滚动按钮
            const handleScroll = (data) => {
                state.scroll += data;
                proxy.$refs.scrollbar.setScrollLeft(state.scroll) ;
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                setTags,
                isActive,
                closeTags,
                closeOtherTags,
                handleScroll,
                
                //组件方法
            }
        },
    })
</script>

<style scoped>
    .fxn-tag{
        min-height: 36px;
        position: fixed;
        top: 3.4rem;
        left: 11.5rem;
        right: 0;
        z-index: 99;
        transition: .3s width ease-in-out,left .3s ease-in-out,right .3s ease-in-out;
    }

    .fxn-tag.active{
        left: 60px;
    }

    .tag-container{
        height: 36px;
        background:#EBEEF5;
        border: 1px solid #DCDFE6;
        display: flex;
    }
    
    .tags{
        flex-grow: 1;
        overflow: hidden;
        margin: 0 .4rem;
    }
    
    .direction,.colse{
        min-width: 1.2rem;
        height: 36px;
        text-align: center;
        line-height: 2rem;
        background: #FFFFFF;
        cursor: pointer;
    }

    .direction.left{
        border-right: 1px solid #DCDFE6;
    }

    .direction.right{
        border-left: 1px solid #DCDFE6;
    }

    .colse{
        min-width: 36px;
        border-left: 1px solid #DCDFE6;
    }

    .close-icon{
        cursor: pointer;
    }

    .tags-box{
        display: flex;
    }

    .tags-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding: 0 .4rem;
        height: 1.4rem;
        margin: .2rem .4rem .2rem 0;
        background: #FFFFFF;
        border-radius: .1rem;
    }

    .tag-item-title{
        padding: 0 .6rem 0 .4rem;
    }

    .tags-item .dot{
        width: .6rem;
        height: .6rem;
        background: #DCDFE6;
        border-radius: 50%;
        transition: all .3s ease-in;
    }

    .tags-item.active .dot{
        background: #326FEA;
    }
</style>